import PlaceHolderCpn from '@/components/PlaceHolderCpn';
import ProCard from '@ant-design/pro-card';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import { useModel } from 'umi';
import { Avatar, Tag } from 'antd';
import ModifyPassWord from './components/ModifyPassWord';
import UpdateSelfInfo from './components/UpdateSelfInfo';

const AccountPage = () => {
  const { initialState } = useModel('@@initialState');
  const currUser = initialState?.currentUser;
  const columns: ProDescriptionsItemProps<USER.CurrentUser>[] = [
    {
      title: '用户账号',
      key: 'text',
      dataIndex: 'account',
    },
    {
      title: '用户角色',
      dataIndex: 'role',
      valueEnum: {
        admin: <Tag>系统管理员</Tag>,
        enterprise: <Tag>企业管理</Tag>,
        staff: <Tag>企业员工</Tag>,
      },
    },
    {
      title: '所属公司',
      key: 'text',
      dataIndex: 'ownerName',
      render: (_, record) =>
        record.ownerId !== 'admin' ? (
          <span>{record.ownerName}</span>
        ) : (
          <PlaceHolderCpn text="系统" />
        ),
    },
    {
      title: '电子邮箱',
      key: 'text',
      dataIndex: 'email',
      render: (_, record) => record.email || <PlaceHolderCpn text="暂无数据" />,
    },
    {
      title: '密码设置',
      render: (_, record) => <ModifyPassWord id={record._id} />,
    },
    {
      title: '上次登录',
      key: 'date',
      dataIndex: 'lastLogin',
      valueType: 'dateTime',
    },
  ];
  return (
    <ProCard
      title="个人空间"
      headerBordered
      bodyStyle={{
        padding: '20px 10vw',
      }}
    >
      <ProCard layout="center" colSpan="160px">
        <Avatar src="/avatar.svg" size={72} />
      </ProCard>
      <ProCard>
        <h3 style={{ paddingBottom: '20px' }}>欢迎回来，{currUser?.userName}~</h3>
        <ProDescriptions column={2} dataSource={currUser} columns={columns} />
        <UpdateSelfInfo user={currUser} />
      </ProCard>
    </ProCard>
  );
};

export default AccountPage;
